<template>
    <div id="add-edit-jha">
        <el-dialog
            :title="titleCon"
            v-model="isUseDialog" 
            draggable 
            :close-on-click-modal="false" 
            width="60%" 
            :before-close="handleClose"
            :destroy-on-close="true"
            @close="clean"
        >
            <el-form :model="ruleForm" ref="ruleFormRef" size="default" label-width="140px" :rules="rules">
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="风险分析单元" prop="l_AnalysisUnitId">
                            <el-select 
                                v-model="ruleForm.l_AnalysisUnitId" 
                                filterable 
                                class="m-2" 
                                placeholder="选择分析单元" 
                                value-key="id"
                                popper-class="set-select"
                                :popper-append-to-body="false"
                            >
                                <el-option
                                    v-for="item in unitOptions"
                                    :key="item.id"
                                    :label="item.v_RiskPartitionName ? item.v_RiskPartitionName + '——' + item.v_Name : item.v_Name"
                                    :value="item.id"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="工作任务" prop="v_Task">
                            <el-input v-model="ruleForm.v_Task" placeholder="工作任务" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="工作步骤" prop="v_Task">
                            <el-input v-model="ruleForm.v_WorkStage" placeholder="工作步骤" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="危害或潜在事件" prop="v_Event">
                            <el-input v-model="ruleForm.v_Event" placeholder="危害或潜在事件" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="风险评估-严重性S">
                            <el-input v-model="ruleForm.v_RiskAssessmentS" placeholder="风险评估-严重性S" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="风险评估-可能性L">
                            <el-input v-model="ruleForm.v_RiskAssessmentL" placeholder="风险评估-可能性L" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="风险评估-严重度R">
                            <el-input v-model="ruleForm.v_RiskAssessmentR" placeholder="风险评估-严重度R" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="风险等级">
                            <el-select 
                                filterable
                                v-model="ruleForm.n_RiskLevel" 
                                class="m-2" 
                                placeholder="选择风险等级" 
                                popper-class="set-select"
                                :popper-append-to-body="false"
                            >
                                <el-option
                                    v-for="item in levelOptions"
                                    :key="item.id"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="评价员">
                            <el-input v-model="ruleForm.v_Valuator" placeholder="评价员" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="分析日期">
                            <el-date-picker
                                v-model="ruleForm.d_ParsingDate"
                                type="date"
                                popper-class="el-date-p"
                                value-format="YYYY-MM-DD"
                                placeholder="请选择日期">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="记录人">
                            <el-input v-model="ruleForm.v_Notekeeper" placeholder="记录人" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="记录日期">
                            <el-date-picker
                                v-model="ruleForm.d_WriteTime"
                                type="date"
                                popper-class="el-date-p"
                                value-format="YYYY-MM-DD"
                                placeholder="请选择日期">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="负责人">
                            <el-input v-model="ruleForm.v_Principal" placeholder="负责人" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="负责人确认日期">
                            <el-date-picker
                                v-model="ruleForm.d_PrincipalSigTime"
                                type="date"
                                popper-class="el-date-p"
                                value-format="YYYY-MM-DD"
                                placeholder="请选择日期">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="主要后果" prop="v_Consequence">
                            <el-input type="textarea" v-model="ruleForm.v_Consequence" placeholder="主要后果" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="现有安全控制措施" prop="v_ControlMeasureNow">
                            <el-input type="textarea" v-model="ruleForm.v_ControlMeasureNow" placeholder="现有安全控制措施" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="建议改正/控制措施">
                            <el-input type="textarea" v-model="ruleForm.v_DCMeasure" placeholder="建议改正/控制措施" clearable />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <el-button @click="cancelUseClick">取消</el-button>
                <el-button type="primary" :disabled="repeatDis" :loading="repeatDis" @click="submitForm(ruleFormRef)">提交</el-button>
            </template>
        </el-dialog>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, reactive , computed , toRef , toRefs , toRaw , onMounted , watch } from 'vue';
import { FormInstance, FormRules , ElMessage, ElButton, ElCol, ElDatePicker, ElDialog, ElDivider, ElForm, ElFormItem, ElInput, ElOption, ElRadio, ElRow, ElSelect, ElTable, ElTableColumn } from 'element-plus';
import { 
    SMSDCAnalysisUnitList,
    SMSDCJHAAdd,
    SMSDCJHAUpdate,
} from '/@/api/centerControl/sms';
/*** 定义接口基础数据类型 */
interface formType {
    repeatDis: Boolean,
    ruleForm: ruleFormType,
}
/*** form 表单数据类型 */
type ruleFormType = {
    l_AnalysisUnitId: any, // 区域/工艺过程(风险管控分析单元Id)
    v_Task: String, // 工作任务
    v_WorkStage: String, // 工作步骤
    v_Event: String, // 危害或潜在事件
    v_Consequence: String, // 主要后果
    v_ControlMeasureNow: String, // 现有安全控制措施

    v_RiskAssessmentS: String, // 风险评估-严重性S
    v_RiskAssessmentL: String, // 风险评估-可能性L
    v_RiskAssessmentR: String, // 风险评估-严重度R
    n_RiskLevel: Number, // 风险等级
    v_DCMeasure: String, // 建议改正/控制措施
    v_Valuator: String, // 评价员
    d_ParsingDate: String, // 分析时间
    v_Notekeeper: String, // 记录人
    d_WriteTime: String, // 记录时间
    v_Principal:String, // 负责人
    d_PrincipalSigTime: String, // 负责人确认时间
}
export default defineComponent( {
    name: 'add-edit-jha',
    components: {},
    props: {
        isUseDialog:{
            type: Boolean,
            default: false,
        },
        repairInfo: {
            type: String,
            default: ''
        }
    },
    setup(props,ctx){
        const titleCon = ref();
        const ruleFormRef = ref();
        const unitOptions = ref();

        /*** state 引用接口定义基础数据初始值 */
        const state = reactive < formType > ({
            repeatDis: false,
            ruleForm: {} as ruleFormType
        })

        /*** 基础验证 rules */
        const rules = reactive < FormRules > ({
            /*** 放置验证 */
            // 区域/工艺过程(风险管控分析单元Id)
            l_AnalysisUnitId: [
				{ required: true, message: '请选择分析单元', trigger: 'change' },
			],
            // 工作任务
            v_Task: [
				{ required: true, message: '请输入工作任务', trigger: 'blur' },
			],
            // 工作步骤
            v_WorkStage: [
				{ required: true, message: '请输入工作步骤', trigger: 'blur' },
			],
            // 危害或潜在事件
            v_Event: [
				{ required: true, message: '请输入危害或潜在事件', trigger: 'blur' },
			],
            // 主要后果
            v_Consequence: [
				{ required: true, message: '请输入主要后果', trigger: 'blur' },
			],
            // 现有安全控制措施
            v_ControlMeasureNow: [
				{ required: true, message: '请输入现有安全控制措施', trigger: 'blur' },
			],
        })

        /*** handleClose 关闭按钮点击事件 */
        const handleClose = () => {
            cancelUseClick();
        }

        /*** cancelUseClick 取消事件 */
        const cancelUseClick = () => {
            ctx.emit('cancelUseClick')
        }

        /*** submitForm 提交事件 */
        const submitForm = (formEl: FormInstance | undefined) => {
            if(!formEl) return
            formEl.validate( async (valid) => { 
                if(valid){
                    state.repeatDis = true;
                    let param = toRaw(state.ruleForm);
                    try{
                        let res: any;
                        if(props.repairInfo !== ''){
                            res = await SMSDCJHAUpdate(param);
                        }else{
                            res = await SMSDCJHAAdd(param);
                        }
                        if(res.success){
                            state.repeatDis = false;
                            ctx.emit('controlUseClick');
                            ctx.emit('updateData');
                        }else{
                            state.repeatDis = false;
                            ctx.emit('controlUseClick');
                        }
                    }catch(error){ state.repeatDis = false; }
                }else{
                    console.log('error submit!')
					return false
                }
            })
        }

        /*** clean 清空数据 */
        const clean = () => {
            ruleFormRef.value.resetFields()
        }

        /*** 获取风险分区数据 */
        const getInfoFun = async() => {
            let res: any = await SMSDCAnalysisUnitList({});
            if(res.success) unitOptions.value = res.data;
        }

        /*** 监听isUseDialog的变化 */
        watch(() => props.isUseDialog,(newVal) => {
            if(newVal){
                state.repeatDis = false;
                getInfoFun();
                if(props.repairInfo !== ''){
                    titleCon.value = '编辑';
                    state.ruleForm = JSON.parse(props.repairInfo);
                }else{
                    titleCon.value = '新增';
                    state.ruleForm = {
                        l_AnalysisUnitId: '', // 区域/工艺过程(风险管控分析单元Id)
                        v_Task: '', // 工作任务
                        v_WorkStage: '', // 工作步骤
                        v_Event: '', // 危害或潜在事件
                        v_Consequence: '', // 主要后果
                        v_ControlMeasureNow: '', // 现有安全控制措施

                        v_RiskAssessmentS: '', // 风险评估-严重性S
                        v_RiskAssessmentL: '', // 风险评估-可能性L
                        v_RiskAssessmentR: '', // 风险评估-严重度R
                        n_RiskLevel: 0, // 风险等级
                        v_DCMeasure: '', // 建议改正/控制措施
                        v_Valuator: '', // 评价员
                        d_ParsingDate: '', // 分析时间
                        v_Notekeeper: '', // 记录人
                        d_WriteTime: '', // 记录时间
                        v_Principal: '', // 负责人
                        d_PrincipalSigTime: '', // 负责人确认时间
                    }
                }
            }
        })

        /*** isUseDialog 响应弹窗的关闭  */
        const isUseDialog = computed(() => {
            return props.isUseDialog
        })

        return {
            handleClose,
            submitForm,
            cancelUseClick,
            clean,
            ruleFormRef,
            titleCon,
            ...toRefs(state),
            isUseDialog,
            rules,
            unitOptions,
            levelOptions: [
                {id: 0, label: '低风险', value: 0},
                {id: 1, label: '一般风险', value: 1},
                {id: 2, label: '较大风险', value: 2},
                {id: 3, label: '重大风险', value: 3},
            ],
        }
    },
} )
</script>
<style scoped lang="scss">
:deep(.el-cascader){
    width: 100%;
}
:deep(.el-select){
    width: 100%!important;
}
:deep(.el-input){
    width: 100%;
}
</style>